<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
        window.scratchJrPage = 'inappBlocksGuide';
    </script>
    <script type="text/javascript" src="../app.bundle.js"></script>
  </head>

  <body>
    <div id="content">
      <div id="ipad-project-view-wrapper">
        <div class="learn-tab learn-blocks">
          <!-- Yellow Blocks -->
          <div class="block-category-header" id="yellow-block-category-header">
          </div>
          <div class="block-category-header-line" id="yellow-block-category-header-line"></div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_GREEN_FLAG">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/onflag.png" />
              </div>
              <div class="block-description" id="BLOCKS_GREEN_FLAG_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_ON_TAP">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/ontap.png" />
              </div>
              <div class="block-description" id="BLOCKS_ON_TAP_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_ON_TOUCH">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/onbump.png" />
              </div>
              <div class="block-description" id="BLOCKS_ON_TOUCH_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_ON_MESSAGE">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/messagereceive.png" />
              </div>
              <div class="block-description" id="BLOCKS_ON_MESSAGE_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_SEND_MESSAGE">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/messagesend.png" />
              </div>
              <div class="block-description" id="BLOCKS_SEND_MESSAGE_DESCRIPTION">
              </div>
            </div>
          </div>
          <!-- Blue Blocks -->
          <div class="block-category-header" id="blue-block-category-header">
          </div>
          <div class="block-category-header-line" id="blue-block-category-header-line"></div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_MOVE_RIGHT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/right.png" />
              </div>
              <div class="block-description" id="BLOCKS_MOVE_RIGHT_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_MOVE_LEFT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/left.png" />
              </div>
              <div class="block-description" id="BLOCKS_MOVE_LEFT_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_MOVE_UP">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/up.png" />
              </div>
              <div class="block-description" id="BLOCKS_MOVE_UP_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_MOVE_DOWN">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/down.png" />
              </div>
              <div class="block-description" id="BLOCKS_MOVE_DOWN_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_TURN_RIGHT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/turnright.png" />
              </div>
              <div class="block-description" id="BLOCKS_TURN_RIGHT_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_TURN_LEFT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/turnleft.png" />
              </div>
              <div class="block-description" id="BLOCKS_TURN_LEFT_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_HOP">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/hop.png" />
              </div>
              <div class="block-description" id="BLOCKS_HOP_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_GO_HOME">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/gohome.png" />
              </div>
              <div class="block-description" id="BLOCKS_GO_HOME_DESCRIPTION">
              </div>
            </div>
          </div>
          <!-- Purple Blocks -->
          <div class="block-category-header" id="purple-block-category-header">
          </div>
          <div class="block-category-header-line" id="purple-block-category-header-line"></div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_SAY">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/say.png" />
              </div>
              <div class="block-description" id="BLOCKS_SAY_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_GROW">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/grow.png" />
              </div>
              <div class="block-description" id="BLOCKS_GROW_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_SHRINK">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/shrink.png" />
              </div>
              <div class="block-description" id="BLOCKS_SHRINK_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_RESET_SIZE">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/reset.png" />
              </div>
              <div class="block-description" id="BLOCKS_RESET_SIZE_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_HIDE">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/hide.png" />
              </div>
              <div class="block-description" id="BLOCKS_HIDE_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_SHOW">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/show.png" />
              </div>
              <div class="block-description" id="BLOCKS_SHOW_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-category-header" id="green-block-category-header">
          </div>
          <div class="block-category-header-line" id="green-block-category-header-line"></div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_POP">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/pop.png" />
              </div>
              <div class="block-description" id="BLOCKS_POP_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_PLAY_RECORDED">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/playsound.png" />
              </div>
              <div class="block-description" id="BLOCKS_PLAY_RECORDED_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-category-header" id="orange-block-category-header">
          </div>
          <div class="block-category-header-line" id="orange-block-category-header-line"></div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_WAIT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/wait.png" />
              </div>
              <div class="block-description" id="BLOCKS_WAIT_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_STOP">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/stop.png" />
              </div>
              <div class="block-description" id="BLOCKS_STOP_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_SET_SPEED">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/speed.png" />
              </div>
              <div class="block-description" id="BLOCKS_SET_SPEED_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_REPEAT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image-repeat" src="images/repeat.png" />
              </div>
              <div class="block-description-repeat" id="BLOCKS_REPEAT_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-category-header" id="red-block-category-header">
          </div>
          <div class="block-category-header-line" id="red-block-category-header-line"></div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_END">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/end.png" />
              </div>
              <div class="block-description" id="BLOCKS_END_DESCRIPTION">
              </div>
            </div>
            <div class="block-wrapper-right">
              <div class="block-title" id="BLOCKS_REPEAT_FOREVER">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/forever.png" />
              </div>
              <div class="block-description" id="BLOCKS_REPEAT_FOREVER_DESCRIPTION">
              </div>
            </div>
          </div>
          <div class="block-wrapper">
            <div class="block-wrapper-left">
              <div class="block-title" id="BLOCKS_GO_TO_PAGE">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="images/page.png" />
              </div>
              <div class="block-description" id="BLOCKS_GO_TO_PAGE_DESCRIPTION">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
